<template>
    <div class="userLogin-container">
        <div class="userLogin-title">请输入手机号码</div>
        <ul class="form-cont">
            <li class="form-num">
                <input type="tel" class="num-ipt" placeholder="填写真实有效的手机号" v-model="phoneNum">
            </li>
            <li class="form-confirm">
                <input type="number" class="confirm-ipt" placeholder="验证码" v-model="confirmNum">
                <span class="get-btn" v-show="btnShow" @click="countdown">获取验证码</span>
                <span class="get-btn get-btn-sec" v-show="!btnShow">（{{secondNum}}）</span>
            </li>
        </ul>
        <div class="btn" @click="submitForm">
            确认
        </div>
    </div>
</template>
<script>
    import loginApi from '../../api/login.js';
    import axios from '../../../util/axios'
    import { Toast } from 'mint-ui';
    export default {
        data () {
            return {
                secondNum: 61,
                btnShow: true,
                phoneNum: '',
                confirmNum: '',
                arr: ['circlesure', 'listenSure', 'microsure'],
                type:'',
                id:'',
                status: '',
                pid: ''
            }
        },
        created() {
            this.getOpenid();
            this.type = this.$route.query.type;
            this.id = this.$route.query.agentId;
            this.status = this.$route.query.status;
            this.pid = this.$route.query.pid;
        },
        methods: {
              getUrlParam (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
              },
              getOpenid() {
              var appid1 = "wxb94fe8357c844b53";
              var code = this.getUrlParam("code");
              var local = window.location.href;
              if (code == null || code === ''){
                window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="
                  + appid1
                  + "&redirect_uri="
                  + encodeURIComponent(local)
                  + "&response_type=code"
                  + "&scope=snsapi_base"
                  + "&state=1"
                  + "#wechat_redirect";
              }else {
                var url = "http://dlsapi.rz158.com/thirdPay/getOpenId?code=" + code;
                axios.post(url).then((response) => {
                  localStorage.setItem("openid", response.data.t);
                }).catch((error) => {
                })
              }
            },
            countdown() {
                let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
                if (!reg.test(this.phoneNum)) {
                    Toast({
                        message: '请输入正确手机号',
                        duration: 2000
                    });
                    return;
                }
                if (this.btnShow) {
                    loginApi.getMessage(this.phoneNum).then(res => {
                        Toast({
                            message: res.message,
                            duration: 2000
                        });
                    })
                }
                if (this.secondNum == 0) {
                    this.secondNum = 61;
                    this.btnShow = true;
                } else {
                    this.btnShow = false;
                    this.secondNum--;
                    setTimeout(() => {
                        this.countdown()
                    }, 1000)
                }
            },
            submitForm () {
                if (!this.phoneNum || !this.confirmNum) {
                    Toast({
                        message: '请填写完整信息',
                        duration: 2000
                    });
                } else {
                    loginApi.loginByTel(this.phoneNum, this.confirmNum).then(res => {
                        if (res.code == 0) {
                            let obj = {};
                            obj.uid = res.result.id;
                            let str = JSON.stringify(obj)
                            localStorage.setItem('dongHang_common_user', str);
                            let pathStr = this.arr[this.type];
                            this.$router.push({path: '/' + pathStr, query:{
                                agentId: this.id,
                                status: this.status,
                                pid: this.pid
                            }});
                        } else if (res.code == -10) {
                            this.$router.push({path:'/user/signUp', query:{
                                tel: this.phoneNum,
                                conf: this.confirmNum,
                                type: this.type,
                                id: this.id,
                                status: this.status,
                                pid: this.pid
                            }})
                        } else {
                            Toast({
                                message: res.message,
                                duration: 2000
                            });
                        }
                    })
                }
            }
        }
    }
</script>
<style lang="less" scoped>
    .userLogin-container {
        .userLogin-title {
            font-size: .4rem;
            text-indent: .3rem;
            padding-top: .5rem;
            margin-bottom: .2rem;
        }
        .form-cont {
            li {
                margin: 0 0.3rem;
                height: 1rem;
                border-bottom: 1px solid #cccccc;
            }
            input {
                height: 1rem;
                float: left;
                border: 0;
                outline: none;
                font-size: 0.3rem;
                color: #282828;
                &::placeholder {
                    color: #707070;
                }
            }
            .num-ipt {
                width: 3.2rem;
            }
            .confirm-ipt {
                width: 2rem;
            }
            .get-btn {
                padding: 0 0.18rem;  
                border-radius: 0.20rem;
                height: 0.50rem;
                float: right;
                background-color: #29abae;
                color: #fff;
                line-height: 0.50rem;
                font-size: 0.26rem;
                text-align: center;
                margin-top: .25rem;
            }
            .get-btn-sec {
                padding: 0 0.3rem;
                background-color: #ccc;
            }
        }
    }
    
    .btn {
        margin: 1rem auto 0;
        width: 6.9rem;
        height: 0.8rem;
        font-size: 0.32rem;
        text-align: center;
        line-height: 0.80rem;
        color: #fff;
        background-color: #29abae;
        border-radius: 5px;
    }
</style>
